{% extends 'base.html' %}
{% block title %}操作日志{% endblock %}
{% block nav %}操作日志{% endblock %}

{% block Sidebar %}
    <div class="sidebar" data-color="orange">
        <div class="logo">
            <a href="#" class="simple-text logo-mini">
                <img src="../static/assets/img/taobaologo.png" alt="#"/>
            </a>
            <a href="#" class="simple-text logo-normal">
                电商平台用户行为预测系统
            </a>
        </div>
        <div class="sidebar-wrapper">
            <ul class="nav">
                <li>
                    <a href="{{ url_for('ec.index') }}">
                        <i class="now-ui-icons design_app"></i>
                        <p>仪表盘</p>
                    </a>
                </li>
                <li>
                    <a href="{{ url_for('ec.raw_data') }}">
                        <i class="now-ui-icons business_chart-pie-36"></i>
                        <p>原始数据</p>
                    </a>
                </li>
                <li>
                    <a href="{{ url_for('ec.visual2') }}">
                        <i class="now-ui-icons education_atom"></i>
                        <p>预测与推荐</p>
                    </a>
                </li>
                <li class="active">
                    <a href="{{ url_for('ec.visual') }}">
                        <i class="now-ui-icons files_single-copy-04"></i>
                        <p>操作日志</p>
                    </a>
                </li>
                <li>
                    <a href="{{ url_for('ec.user') }}">
                        <i class="now-ui-icons users_single-02"></i>
                        <p>个人中心</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
{% endblock %}

{% block content %}
    <div class="panel-header panel-header-sm" style="background: linear-gradient(135deg, #F5F5F5 0%, #1c84fc 100%);"></div>
    <div class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-md-6">
                                <h4 class="card-title">操作日志</h4>
                                <p class="card-category">系统用户的操作记录</p>
                            </div>
                            <div class="col-md-6 text-right">
                                <div class="dropdown">
                                    <button type="button"
                                            class="btn btn-primary btn-round dropdown-toggle"
                                            data-toggle="dropdown">
                                        <i class="now-ui-icons ui-1_settings-gear-63"></i> 操作
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-right">
                                        <a class="dropdown-item" href="#" id="refreshLogs">
                                            <i class="now-ui-icons arrows-1_refresh-69"></i> 刷新日志
                                        </a>
                                        <a class="dropdown-item" href="{{ url_for('ec.download_logs') }}">
                                            <i class="now-ui-icons arrows-1_cloud-download-93"></i> 下载日志
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead class="text-primary">
                                    <tr>
                                        <th class="text-center">时间</th>
                                        <th class="text-center">操作类型</th>
                                        <th class="text-center">用户</th>
                                        <th class="text-center">操作详情</th>
                                    </tr>
                                </thead>
                                <tbody id="logTableBody">
                                    {% for log in logs %}
                                        <tr>
                                            <td class="text-center">{{ log.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                                            <td class="text-center">
                                                <span class="badge badge-{{
                                                    'primary' if log.behavior == '访问' else
                                                    'success' if log.behavior == '登录' else
                                                    'warning' if log.behavior == '上传' else
                                                    'info' if log.behavior == '下载' else
                                                    'danger' if log.behavior == '错误' else
                                                    'secondary'
                                                }}">
                                                    {{ log.behavior }}
                                                </span>
                                            </td>
                                            <td class="text-center">
                                                {% if log.user_id %}
                                                    {{ UserModel.query.get(log.user_id).username }}
                                                {% else %}
                                                    系统
                                                {% endif %}
                                            </td>
                                            <td>{{ log.details }}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <div class="row">
                            <div class="col-md-12 text-center">
                                <button id="loadMore" class="btn btn-primary btn-round">
                                    <i class="now-ui-icons arrows-1_minimal-down"></i> 加载更多
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
    $(document).ready(function() {
        let currentPage = 1;

        // 刷新日志
        $('#refreshLogs').click(function(e) {
            e.preventDefault();
            currentPage = 1;
            fetchLogs(currentPage);
        });

        // 加载更多日志
        $('#loadMore').click(function() {
            currentPage++;
            fetchLogs(currentPage);
        });

        function fetchLogs(page) {
            $.ajax({
                url: "{{ url_for('ec.get_logs') }}",
                type: "GET",
                data: { page: page },
                dataType: "json",
                success: function(data) {
                    if (page === 1) {
                        $('#logTableBody').empty();
                    }

                    if (data.length === 0 && page === 1) {
                        $('#logTableBody').html('<tr><td colspan="4" class="text-center">暂无日志记录</td></tr>');
                        return;
                    }

                    if (data.length === 0) {
                        $('#loadMore').prop('disabled', true).text('没有更多日志了');
                        return;
                    }

                    $.each(data, function(index, log) {
                        const badgeClass =
                            log.behavior.includes('访问') ? 'primary' :
                            log.behavior.includes('登录') ? 'success' :
                            log.behavior.includes('上传') ? 'warning' :
                            log.behavior.includes('下载') ? 'info' :
                            log.behavior.includes('错误') ? 'danger' : 'secondary';

                        const row = `
                            <tr>
                                <td class="text-center">${log.timestamp}</td>
                                <td class="text-center"><span class="badge badge-${badgeClass}">${log.behavior}</span></td>
                                <td class="text-center">${log.user || '系统'}</td>
                                <td>${log.details || '-'}</td>
                            </tr>
                        `;
                        $('#logTableBody').append(row);
                    });
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching logs:', error);
                    alert('获取日志数据失败，请稍后重试');
                }
            });
        }
    });
    </script>
{% endblock %}